<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交媒体页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            background-color: #1a2533;
            color: #fff;
        }

        .container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏 */
        .sidebar {
            width: 60px;
            background-color: #1a2533;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .sidebar a {
            color: #fff;
            text-decoration: none;
            margin: 15px 0;
            font-size: 24px;
        }

        /* 主要内容 */
        .main-content {
            flex: 1;
            padding: 20px;
        }

        /* 头部横幅 */
        .header {
            background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e');
            background-size: cover;
            background-position: center;
            height: 200px;
            border-radius: 10px;
            position: relative;
            margin-bottom: 20px;
        }

        .profile-pic {
            width: 80px;
            height: 80px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            bottom: -40px;
            left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .profile-pic img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }

        .user-info {
            margin-top: 50px;
            padding: 0 20px;
        }

        .user-info h2 {
            font-size: 24px;
        }

        .user-stats {
            display: flex;
            gap: 20px;
            margin: 10px 0;
        }

        .tabs {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }

        .tabs a {
            color: #fff;
            text-decoration: none;
            padding-bottom: 5px;
        }

        .tabs a.active {
            border-bottom: 2px solid #1da1f2;
        }

        /* 帖子区域 */
        .posts {
            display: flex;
            gap: 20px;
        }

        .post {
            background-color: #253347;
            padding: 15px;
            border-radius: 10px;
            flex: 1;
        }

        /* 右侧栏 */
        .right-sidebar {
            width: 300px;
            padding: 20px;
        }

        .calendar {
            background-color: #253347;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
        }

        .calendar table {
            width: 100%;
            margin-top: 10px;
        }

        .calendar th, .calendar td {
            padding: 5px;
            font-size: 14px;
        }

        .calendar td {
            background-color: #1a2533;
            border-radius: 5px;
        }

        .calendar td.today {
            background-color: #1da1f2;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边栏 -->
        <div class="sidebar">
            🏠
            🔔
            📝
            📩
            📡
            ⚙️
        </div>

        <!-- 主要内容 -->
        <div class="main-content">
            <!-- 头部横幅 -->
            <div class="header">
                <div class="profile-pic">
                    < img src="https://via.placeholder.com/70" alt="Profile">
                </div>
            </div>

            <!-- 用户信息 -->
            <div class="user-info">
                <h2>LogicYarn</h2>
                <div class="user-stats">
                    <span>关注: 10个</span>
                    <span>粉丝: 0</span>
                    <span>获赞: 4</span>
                </div>
                <div class="tabs">
                    帖子
                    分析
                    小组
                    期间
                </div>
            </div>

            <!-- 帖子 -->
            <div class="posts">
                <div class="post">
                    <h3>博客更新博主更新状况</h3>
                    <p>支持倒数线—2024...</p >
                </div>
                <div class="post">
                    <h3>一次ICerb的博新挑战记录</h3>
                    <p>挑战: 新新新于用时约3-4年次...</p >
                </div>
            </div>
        </div>

        <!-- 右侧栏 -->
        <div class="right-sidebar">
            <div class="calendar">
                <h3>2024年8月</h3>
                <table>
                    <tr>
                        <th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>
                    </tr>
                    <tr>
                        <td></td><td></td><td></td><td>1</td><td>2</td><td>3</td><td>4</td>
                    </tr>
                    <tr>
                        <td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
                    </tr>
                    <tr>
                        <td>12</td><td>13</td><td class="today">14</td><td>15</td><td>16</td><td>17</td><td>18</td>
                    </tr>
                    <tr>
                        <td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
                    </tr>
                    <tr>
                        <td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>